<template>
  <div class="execution">
    <basic-container>
      <el-form :inline="true" :model="formInline" class="form-inline">
        <el-form-item label="订单编号">
          <el-input v-model="formInline.serialNum" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询订单</el-button>
        </el-form-item>
      </el-form>

      <h2 class="title">
        退货商品清单
      </h2>

      <!--请款清单数据表格-->
      <div class="requestPayoutTable">
        <template>
          <el-table
            :data="tableData"
            border
            style="width: 100%">
            <el-table-column
              type="index" show-overflow-tooltip
              label="序号"
              width="180">
            </el-table-column>
            <el-table-column
              prop="goodsImg"
              label="商品图片"
              width="180">
              <template slot-scope="scope">
                <img :src="scope.row.goodsImg" height="50px"/>
              </template>
            </el-table-column>
            <el-table-column
              prop="goodsName"
              label="商品名称">
            </el-table-column>
            <el-table-column
              prop="unit"
              label="单位">
            </el-table-column>
            <el-table-column
              prop="orderGoodsNum"
              label="发货数">
            </el-table-column>
            <el-table-column
              prop="buyPrice"
              label="发货单价">
            </el-table-column>
            <el-table-column
              label="申请退货数">
              <template slot-scope="scope">
                <el-input v-model="scope.row.goodsNum" v-enter-number type="number" oninput="if(value.length>8)value=value.slice(0,8)" placeholder="请输入内容" @change="entryNum(scope.row)"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              label="备注">
              <template slot-scope="scope">
                <el-input v-model="scope.row.remarks" placeholder="请输入内容" maxlength="20"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              fixed="right"
              label="操作"
              width="120">
              <template slot-scope="scope">
                <el-button
                  @click.native.prevent="deleteRow(scope.$index, tableData)"
                  type="text"
                  size="small">
                  移除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </div>
      <div class="aggregate">
        <h4>商品数量  {{totalNum}}  件&nbsp;&nbsp;&nbsp;合计金额：￥{{totalPrice.toFixed(2)}}</h4>
      </div>
      <div class="refReason">
        <el-form :inline="true" :model="formInline" class="form-inline">
          <el-form-item label="其他费用">
            <el-input v-model="otherAmount" type="number" placeholder="请输入金额"></el-input>
          </el-form-item>
          <el-form-item label="退款原因">
            <el-input v-model="returnReason" type="textarea" width="150"  maxlength="50" placeholder="请输入退货原因"></el-input>
          </el-form-item>
          <el-form-item label="退款图片">
            <div v-if="photoList" v-for="(item,index) in photoList" v-key class="thumbUrl">
              <img :src="item.picUrl" />
              <div class="hover_show">
                <i class="el-icon-delete" @click="sliderPictureRemove(index)"></i>
              </div>
            </div>
            <div class="select_img" @click="sleImg = true"><i class="el-icon-plus"></i></div>
            <el-dialog title="选择图片" :visible.sync="sleImg" style="text-align: left;">
              <sel-img-photogallery ref="selImg" type="09" @select="onSelectImgs"></sel-img-photogallery>
            </el-dialog>
          </el-form-item>
        </el-form>
      </div>
      <div class="buttonGroup">
        <el-button type="primary" @click="save">提交</el-button>
        <el-button type="primary" @click="close">取消</el-button>
      </div>
    </basic-container>
  </div>
</template>

<script>
    import {
      addSend,
      getOrder
    } from '@/api/scm/order/return_order'
    import {
      mapGetters
    } from 'vuex'
    import Util from '@/util/pds/utils';
    let cookieUtil = new Util();
    import selImgPhotogallery from '@/components/pds/common/sel_img_photogallery'
    export default {
        name: "index",
      data() {
        return {
          dialogImageUrl: '',
          dialogVisible: false,
          input:'',
          formInline: {
            serialNum: '',
          },
          tableData: [],
          totalNum:0,
          totalPrice:0,
          detail:{},
          remark:'',
          PleMoney:'',
          returnReason:'',
          tmp:'',
          submitList:[],
          otherAmount:0,
          sleImg:false,
          photoList:[]
        }
      },
      created(){
          if(this.$route.query.buyId != undefined){
            this.formInline.serialNum = this.$route.query.buyId;
            this.getDetail(this.$route.query.buyId);
          }
      },
      computed: {
        ...mapGetters(['tagWel', 'tagList', 'tag', 'website']),
        tagLen() {
          return this.tagList.length || 0
        }
      },
      components: { selImgPhotogallery },
      methods: {
        onSelectImgs(imgs){
          if(imgs.length<=5){
            this.photoList = imgs;
          }else{
            this.$message.success("最多上传五张");
          }
          this.sleImg = false;
        },
        // 删除图片
        sliderPictureRemove(index) {
          this.photoList.splice(index,1);
          this.list.splice(index,1);
        },
        onSubmit() {
          if(this.formInline.serialNum == ''){
            this.$message({
              showClose: true,
              message: '请输入订单号',
              type: 'error'
            })
             return false
          }
          this.getDetail(this.formInline.serialNum);
        },
        getDetail(id){
          let params = {
            buyId: id
          }
          getOrder(params).then(res => {
            if( res.data.code == 0) {
              this.tmp = res.data.data;
              this.tableData = this.tmp.detailList;
              this.totalNum = this.tableData.length;
              this.tableData.forEach(item =>{
                this.totalPrice += parseFloat(item.orderGoodsNum*item.buyPrice);
              });
            }else{
              this.tableData = [];
              this.$message.warning(res.msg)
            }
          }).catch( err => {
            this.$message.error( err)
          })
        },
        entryNum(row){
          if(row.goodsNum>row.orderGoodsNum){
            this.$message({
              showClose: true,
              message: '不能大于发货数',
              type: 'error'
            })
            row.goodsNum = 1;
          }
          this.totalPrice = 0;
          this.tableData.forEach(item =>{
            this.totalPrice += parseFloat(item.goodsNum*item.buyPrice);
          });
        },
        //移除
        deleteRow(index, rows){
          this.tableData.splice(index, 1);
          this.totalNum = this.tableData.length;
          if(this.totalNum == 0){
            this.totalPrice = 0;
            return false;
          }
          this.totalPrice = 0;
          this.tableData.forEach(item =>{
            this.totalPrice += parseFloat(item.orderGoodsNum*item.buyPrice);
          });
        },
        handleRemove(file, fileList) {
          console.log(file, fileList);
        },
        handlePictureCardPreview(file) {
          console.log(file);
          this.dialogImageUrl = file.url;
          this.dialogVisible = true;
        },
        //提交
        save(){
          if(this.returnReason == ''){
            this.$message({
              showClose: true,
              message: '请输入退货原因',
              type: 'error'
            })
            return false;
          }
          this.tmp.returnType = 0;
          this.tmp.returnReason = this.returnReason;
          this.tmp.otherAmount = this.otherAmount;
          let params = this.tmp;
          params.photoList = [];
          for(var i in this.photoList){
            params.photoList.push(this.photoList[i].id);
          }
          addSend(params).then(res=>{
            if(res.code=200){
              this.$message.success("退货单生成成功");
              let _this = this;
              console.log(res);
              // setTimeout(function () {
              //   _this.close();
              // },2000)
            }else{
              this.$message.error("退货单生成失败")
            }
          });
        },
        close(){
          var str_before = location.href.split('#')[1];
          let { tag, key } = this.findTag(str_before);
          this.$store.commit('DEL_TAG', tag);
          this.$router.go(-1);
        },
        findTag(value) {
          let tag, key
          this.tagList.map((item, index) => {
            if (item.value === value) {
              tag = item
              key = index
            }
          })
          return { tag: tag, key: key }
        }
      }
    }
</script>

<style lang="scss" scoped>
  .refReason{
    overflow: hidden;
    line-height: 36px;
  }
  .refReason h3{
    margin-right: 10px;
  }
  .requestPayoutTable{
    margin: 20px 0;
  }
  .aggregate{
    &:after{
      content: "";
      height: 0;
      display: block;
      overflow: hidden;
      clear: both;
    }
    h4{
      float: right;
      font-weight: 400;

    }
  }
  .title{
    span{
      font-size: 14px;
      font-weight: 400;
      color: #999;
    }
  }
  .addImg{
    margin-top: 20px;
  }
  .refReason{
    margin-top: 20px;
    .el-select{
      width: 40%!important;
    }
  }
  .buttonGroup{
    margin-top: 20px;
  }
  .select_img{
    width: 98px;
    height: 98px;
    line-height: 98px;
    border: 1px dashed #c0ccda;
    background-color: #fbfdff;
    font-size: 28px;
    color: #8c939d;
    cursor: pointer;
    border-radius: 6px;
    text-align: center;
    float: left;
  }
  .thumbUrl{
    width: 100px;
    height: 100px;
    position: relative;
    float: left;
    margin:0 10px 10px 0;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #c0ccda;
  }
  .thumbUrl img{
    width: 100%;
    height: 100%;
  }
  .thumbUrl .hover_show{
    position: absolute;
    top: 0;
    left: 0;
    background-color: rgba(0,0,0,0.5);
    width: 100%;
    height: 100%;
    display: none;
    line-height: 100px;
    text-align: center;
  }
  .thumbUrl:hover .hover_show{
    display: block;
  }
  .thumbUrl .hover_show i{
    color: #fff;
    margin: 0 10px;
    cursor: pointer;
  }
</style>
